<template>
    <div class="header">
      <div class="header-left">
        <span class="iconfont">&#xe667;</span>
      </div>
      <div class="header-input">
        <span class="iconfont">&#xe62b;</span>
        请输入城市/景点/游玩主题</div>
      <router-link to="/city">
        <div class="header-right">{{ this.$store.state.city }}
          <span class="iconfont">&#xe64a;</span>
        </div>
      </router-link>

    </div>
</template>

<script>
    export default {
        name: "header",
      data(){
          return {

          }
      },
      props: {


      }
    }
</script>

<style lang="stylus" scoped>
  /*
  问题总结:   1. flex布局,左右两边固定宽,中间输入框子自适应,设置 flex:1
              2.lineheight 和 height 一起设置时才能让文字居中
              3.给 右边的盒子设置文字居中,左边的盒子也能有这个效果(为啥)
              4.复习 一遍 flex布局 和 rem适配
              5.用rem时,需要设置html 的字体大小,这里是50px;在 reset.css中修改


      6.怎么使用iconfont字体图标
          //iconfont官网上,登录账号,创建项目,选择需要的字体图标加入购物车,最后都添加到项目中,选择 unicode 选项,并下载到本地.
          //下载后的文件用到的也就是 .eot .svg ,ttf .woff这四个文件,还有个iconfont.css文件.此项目中字体图标文件放在iconfont文件夹中,字体样式文件放在css中
  需要注意的是:字体图标样式文件中的字体文件路径需要改一下.
         //在main.js入口文件中引入 iconfont.css 文件
         //在组件中,将字体图标所对应的代码(官网上复制)复制到标签中,并添加iconfont类名就能使用了(注意:这里一定要加这个类名)
      7.优化代码,怎么设置路径缩写,如 @ 这样的,代表src这个文件下的目录, 在webpack.base.conf.js文件中的 resolve 属性中设置
       代码如下:  'css':resolve('src/assets/css'),表示 css 这个路径下
       注意: js中使用这个缩写正常用就行.引入css文件是这个缩写前面要加 '~'
       @import "~css/common.styl"
      8.导航栏的背景蓝色在各个地方都能用到,所以把他设置成一个变量
      $bgColor = red
  */

@import "~css/common.styl"

  .header
    display:flex
    height: .86rem
    line-height: .86rem
    background-color: $bgColor
    color:#fff

    .header-left
      width:.64rem
      float:left
      .iconfont
        font-size: .4rem
        padding-left: .12rem
    .header-input
      flex:1
      height: .64rem
      line-height: .64rem
      margin-top: .12rem
      margin-left: .2rem
      background: #fff
      border-radius: .1rem
      color: #ccc
      padding-left: 0.2rem

    .header-right
      width: 1.24rem
      float:right
      text-align:center
      color:#fff
      .iconfont
        font-size: 0.2rem
        margin-left:- 0.04rem


</style>
